<template>
    <vue-draggable-resizable
    :w="dragStyles.w"
    :h="dragStyles.h"
    :min-width="360"
    :min-height="300"
    :max-width="1900"
    :max-height="1000"
    :parent="false"
    :active="true"
    :x="dragStyles.x"
    :y="dragStyles.y"
    :z="999"
    class-name="chart-panel-drag"
    class-name-handle="my-handle-class"
    v-show="showEchartPanel"
    @resizing="onResize"
    @dragging="onDrag"
  >
    <div id="title" class="title">
      <span>统计图</span>
      <i class="close icon-font el-icon-close" @click="closeInfoWin"></i>
      <i class="close icon-font el-icon-zoom-in" @click="changeSize"></i>
    </div>
    <div class="nav">
      <!-- <span class="pos">指标 :&nbsp;</span> -->
      <el-select
        class="pos"
        style="margin-left:0px;"
        :popper-append-to-body="false"
        multiple
        collapse-tags
        v-model="value"
        size="mini"
        placeholder="请选择"
        @change="getChangeIdens"
      >
        <el-option
          v-for="(iden,idenindex) in layerFullIdens"
          :key="idenindex"
          :label="iden.name"
          :value="iden.id"
        >
          <span style="float: left;font-size:12px">
            <span v-show="iden.isGroupValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
            {{ iden.name }}
          </span>
        </el-option>
      </el-select>
      <span class="pos fontClass" @click="getChart('line')" title="面积堆叠图">
        <img src="../images/line_a.png" alt="面积堆叠图" />
      </span>
      <span class="pos fontClass" @click="getChart('bar')" title="柱状百分比图">
        <img src="../images/bar_a.png" alt="百分比堆叠图" />
      </span>
      <span class="pos fontClass" @click="getChart('bar-stack')" title="柱状堆叠图">
        <img src="../images/bar_b.png" alt="柱状堆叠图" />
      </span>
      <span class="pos fontClass" @click="getChart('polar')" title="极坐标系">
        <img src="../images/nested_pies.png" alt="极坐标系" />
      </span>
    </div>
    <div class="chart-content">
      <div class="chart" id="chart" :style="chartBoxStyle"></div>
    </div>
    </vue-draggable-resizable>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import echarts from "echarts";
import echartsrender from "../../../utils/jquery.echarts.js";
import * as macroAPI from "@/pages/macro/api/macro.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
//  import * as Data from "./../components/treeData.js";
import ThemerangeLayer from "@/utils/map/lib/macrolayers/themerange.layer";
//  import ChartLayer from "@/utils/map/lib/macrolayers/echarts.layer.js";
import "echarts/theme/macarons.js";
export default {
  name: "chart-panel-drag",
  data() {
    return {
      currentIndex: "",
      value: [],
      id: "chart",
      chart: null,
      isResize: false,
      checkedGroups: [],
      quota: "",
      options: [],
      chartsData: {
        legend: [],
        xData: [],

        seriesData: [
          {
            groupVal: []
          }
        ]
      },
      layerFullIdens: [],//指标数组
      resultChartChangeData: [], //存放所有图表的数据便于切换
      regionCodes: [],
      unitMap: config.analystUnitMap,
      unit: "", //单位
      left: document.documentElement.clientWidth - 410,
      top: 460,
      loadData: null,
      regions: [],
      optionsData: [],
      chartBoxStyle:{
        width:"360px",
        height:"220px"
      },
      dragStyles:{
        x: document.documentElement.clientWidth - 410,
        y: 510,
        w:360,
        h:300
      }
    };
  },
  computed: {
    ...mapState({
      showEchartPanel: state => state.macro.showEchartPanel,
      currQuotaMetaData: state => state.macro.currQuotaMetaData,
      regionCodeArray: state => state.macro.regionCodeArray,
      currQuotaGroups: state => state.macro.currQuotaGroups,
      idenCode: state => state.macro.idenCode,
      periodType: state => state.macro.periodType,
      startTime: state => state.macro.startTime,
      currentLayerIdenValue: state => state.macro.currentLayerIdenValue,
      currentLayerCode: state => state.macro.currentLayerCode,
      layerIdens: state => state.macro.layerIdens,
      currentIdens: state => state.macro.currentIdens,
      currentRegionInfo: state => state.macro.currentRegionInfo,
      currentYearMonth: state => state.macro.currentYearMonth,
      chartValue: state => state.macro.chartValue,
      enlargeChart: state => state.macro.enlargeChart,
      chartType: state => state.macro.currentChartType,
      currentRegionXY: state => state.macro.currentRegionXY
    })
  },
  watch: {
    // value(now, old) {
    //   this.resultChartChangeData.map(item => {
    //     if (item.id == now) {
    //       this.chartsData = item.chartData;
    //       EventBus.$emit("iden-change", item.id);
    //       this.getChart(this.chartType);
    //     }
    //   });
    // },
    showEchartPanel(val) {
      if (val) {
        this.$nextTick(function() {
          if (this.chartValue) {
            this.getNewIden();
          }
          this.getChart(this.chartType);
        });
      }
    }
  },
  mounted() {
    this.onEvent();
     
  },
  beforeDestroy(){
    EventBus.$off("fullScreen");
  },
  created() {},
  methods: {
    ...mapMutations(["changeShowEchartPanel"]),
    onEvent() {
      EventBus.$on("formateTableData-spatialAnalysis0", this.formateEchartData);
      EventBus.$on("onChart-action", this.onEchartsAction);
      EventBus.$on("offChart-action", this.offEchartAction);
      EventBus.$on("iden-change", this.getNewIden);
      EventBus.$on(
        "formateChangeCurrentData-spatialAnalysis",
        this.changeFormateData
      );
      EventBus.$on("iden-change-enlarge-type", type => {
        this.$store.commit("currentChartType", type);
      });
      EventBus.$on("fullScreen", () => {
        this.resetDragStyles();
      });
    },
    resetDragStyles(){
      let left = document.documentElement.clientWidth - 410;
      $(".chart-panel-drag").css({"width":"360px","height":"300px","left":left,"top":"510px"})
      this.dragStyles.x = left;
      this.dragStyles.y = 510;
      this.dragStyles.w = 360;
      this.dragStyles.h = 300;
      this.chartBoxStyle.width = "360px";
      this.chartBoxStyle.height = "200px";
      setTimeout(this.chart.resize({
        width:'360px',
        height:'200px'
      }),1500)
    },
    onResize(x, y, width, height){
      this.dragStyles.x = x;
      this.dragStyles.y = y;
      this.dragStyles.w = width;
      this.dragStyles.h = height;
      this.chartBoxStyle.width = width+"px";
      this.chartBoxStyle.height = (height-100)+"px";
      this.chart.resize({
        width:width+"px",
        height:(height-100)+"px"
      });
    },
    onDrag(x, y, width, height){
      this.dragStyles.x = x;
      this.dragStyles.y = y;
    },
    getChangeIdens() {
      this.optionsData = [];
      this.$store.commit("chartValue", this.value);
      this.value.map(item => {
        this.getNewChartData(item);
      });
      this.getChart(this.chartType);
    },
    getNewIden(data) {
      this.value = [];
      this.optionsData = [];
      this.value = this.chartValue ? this.chartValue : [data];
      this.value.map(item => {
        this.getNewChartData(item);
      });
      this.getChart(this.chartType);
    },
    onEchartsAction(data) {
      if (this.chart) {
        let index = 0;
        this.regionCodeArray.map((item, i) => {
          if (item == data.regionCode) {
            index = i;
          }
        });
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index
        });
      }
      // this.$store.commit("changeShowEchartPanel", true);
    },
    offEchartAction(data) {
      if (this.chart) {
        let index = 0;
        this.regionCodeArray.map((item, i) => {
          if (item == data.regionCode) {
            index = i;
          }
        });
        this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index
        });
        this.chart.dispatchAction({
          type: "hideTip",
          seriesIndex: 0,
          dataIndex: index
        });
      }
    },
    formateEchartData(data) {
      this.value = [];
      this.loadData = data;
      //渲染下拉框
      this.layerFullIdens = [];
      this.currentIdens.map(item => {
        this.layerFullIdens.push({
          id: item.idenCode,
          idenCode: item.idenCode,
          name: item.idenName,
          isGroupValue: false
        });
        let req = {
          iden_code: item.idenCode
        };
        //查询指标分组值
        macroAPI
          .idenGroupList(req)
          .then(res => {
            if (res.message == "success") {
              
              this.layerIdens.map(idenGroup => {
                if (item.idenCode == idenGroup.idenCode) {
                  for (let i = 0; i < idenGroup.data.length; i++) {
                    for (let j = 0; j < res.data.length; j++) {
                      if (idenGroup.data[i] == res.data[j].code) {

                        this.layerFullIdens.map((list,index) =>{//防止顺序乱掉
                          if(list.id == item.idenCode){
                            this.layerFullIdens.splice((index+1),0,{
                              id: item.idenCode + "_" + res.data[j].code,
                              idenCode: res.data[j].code,
                              name: item.idenName + "-" + res.data[j].name,
                              isGroupValue: true
                            })
                          }
                        });
                      }
                    }
                  }
                }
              });
              //将获取到的数组去重
              this.layerFullIdens = this.layerFullIdens.filter(
                (x, index, self) => {
                  var arrids = [];
                  this.layerFullIdens.forEach((item, i) => {
                    arrids.push(item.id);
                  });
                  return arrids.indexOf(x.id) === index;
                }
              );
            } else {
              this.$message({
                message: "暂无数据",
                type: "warning"
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    changeFormateData(data) {
      // let arr = []
      // this.loadData = data;
      // //渲染下拉框
      // this.currentIdens.map(item => {
      //   let req = {
      //     iden_code: item.idenCode
      //   };
      //   macroAPI
      //     .idenGroupList(req)
      //     .then(res => {
      //       if (res.message == "success" && res.data.length) {
      //         arr.push({
      //           id: item.idenCode,
      //           idenCode: item.idenCode,
      //           name: item.idenName,
      //           isGroupValue:false,
      //         });
      //         this.layerIdens.map(idenGroup => {
      //           if (item.idenCode == idenGroup.idenCode) {
      //             for (let i = 0; i < idenGroup.data.length; i++) {
      //               for (let j = 0; j < res.data.length; j++) {
      //                 if (idenGroup.data[i] == res.data[j].code) {
      //                   arr.push({
      //                     id: item.idenCode + "_" + res.data[j].code,
      //                     idenCode: res.data[j].code,
      //                     name:item.idenName + "-" + res.data[j].name,
      //                     isGroupValue:true
      //                   });
      //                 }
      //               }
      //             }
      //           }
      //         });
      //       } else {
      //         this.$message({
      //           message: "暂无数据",
      //           type: "warning"
      //         });
      //       }
      //     })
      //     .catch(error => {
      //       console.log(error);
      //     });
      // });
      // this.layerFullIdens = arr;
    },
    //根据每个iden值获取对应的数据并组合
    getNewChartData(iden) {
      let obj = {};
      obj["data"] = [];
      obj["region"] = [];
      obj["region_name"] = [];
      this.regionCodeArray.map(item => {
        if (iden.split("_")[1]) {
          let key = `${item}-${iden.split("_")[0]}-${iden.split("_")[1]}-${
            this.periodType
          }-${iden.split("_")[0]}-${iden.split("_")[1]}-${
            this.currentYearMonth
          }`;
          if (this.loadData.formateData.formatValue[key]) {
            obj["name"] =
              this.loadData.formateData.formatValue[key]
                .iden_name_hierarchical +
              "-" +
              this.loadData.formateData.formatValue[key]
                .ident_name_hierarchical;
            obj["region"].push(
              this.loadData.formateData.formatValue[key].region_code
            );
            obj["region_name"].push(
              this.loadData.formateData.formatValue[key].ident_name_hierarchical
            );
            obj["data"].push(this.loadData.formateData.formatValue[key].value);
          }
        } else {
          let key = `${item}-${iden}-${item}-${this.periodType}-${iden}-${item}-${this.currentYearMonth}`;
          if (this.loadData.formateData.formatValue[key]) {
            obj["name"] = this.loadData.formateData.formatValue[
              key
            ].iden_name_hierarchical;
            obj["region"].push(
              this.loadData.formateData.formatValue[key].region_code
            );
            obj["region_name"].push(
              this.loadData.formateData.formatValue[key].ident_name_hierarchical
            );
            obj["data"].push(this.loadData.formateData.formatValue[key].value);
          }
        }
      });
      this.optionsData.push(obj);
      this.$store.commit("changeShowEchartPanel", this.showEchartPanel);
    },
    closeInfoWin() {
      this.changeShowEchartPanel(!this.showEchartPanel);
    },
    changeSize() {
      EventBus.$emit("change-currentChartType", this.chartType);
      //改变窗口大小
      this.$store.commit("changeEnlargeChart", true);
      this.$store.commit("changeEnlargeTable", false);
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowDataTable", false);
      this.$store.commit("changeShowEchartPanel", false);
      this.$store.commit("changePlay",false);
    },
    getChart(charttype) {
      this.$store.commit("currentChartType", charttype);
      let _this = this;
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById(this.id), "macarons");
        let regionCode = "";
        this.chart.on("mousemove", function(params) {
          let index = 0;
          _this.regionCodeArray.map((item, i) => {
            if (i == params.dataIndex) {
              index = i;
            }
          });
          if (this.currentIndex == params.dataIndex) {
            // console.log(params.dataIndex)
          } else {
            _this.currentRegionXY.map((item, i) => {
              if (item.code == _this.regionCodeArray[index]) {
                EventBus.$emit("onLayer-action", {
                  regionCode: _this.regionCodeArray[index],
                  data: item
                });
              }
            });
            EventBus.$emit("table-actiontrigger", {
              regionCode: _this.regionCodeArray[index]
            });
            this.currentIndex = params.dataIndex;
          }
        });
        this.chart.on("mouseout", function(params) {
          this.currentIndex = "aa";
          let index = 0;
          _this.regionCodeArray.map((item, i) => {
            if (i == params.dataIndex) {
              index = i;
            }
          });
          const map = sgisMapBase.getMap();
          if (map.overlayers["themerange"]) {
            map.overlayers["themerange"].removeCurrentData();
          }
          EventBus.$emit("off-range-themerange", {
            regionCode: _this.regionCodeArray[index]
          });
          EventBus.$emit("table-heighLightOff", {
            regionCode: _this.regionCodeArray[index]
          });
        });
      }
      this.chart.clear();
      if (charttype === "line") {
        this.chart.setOption(this.initLinechart(), "macarons");
      } else if (charttype === "bar") {
        this.chart.setOption(this.initBarChart(), "macarons");
      } else if (charttype === "bar-stack") {
        this.chart.setOption(this.initbarStackChart(), "macarons");
      } else if (charttype === "polar") {
        this.chart.setOption(this.initPolarChart(), "macarons");
        this.chart.on("click", params => {
          if (
            params.componentSubType != "treemap" &&
            params.dimensionNames[0] == "radius" &&
            params.componentSubType == "bar"
          ) {
            let option = this.initPolarChart();
            var index = params.dataIndex;
            var i = option.series.length - 1;
            let pieData = [];
            this.optionsData.map((item, index) => {
              let pie = {};
              item.region_name.map((name, i) => {
                if (params.name == name) {
                  pie.name = item.name;
                  pie.value = item.data[i];
                }
              });
              pieData.push(pie);
            });
            option.series[i].data = pieData;
            option.series[i].name = params.name;
            this.chart.setOption(option);
          }
        });
      }
      this.chart.resize();
    },
    initLinechart() {
      if (!this.optionsData.length) {
        return false;
      }
      let new_series = [];
      let new_region = [];
      this.optionsData.map(item => {
        new_series.push({
          name: item.name,
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: item.data
        });
      });
      this.currentRegionInfo.map(region => {
        new_region.push(
          region.originName ? region.originName : region.shortName
        );
      });
      return {
        title: {
          x: "center",
          textStyle: {
            align: "center",
            color: "rgba(0,0,0,0.7)",
            fontFamily: "Microsoft YaHei",
            fontSize: 15
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: new_region,
          bottom: "0",
          left: "center"
        },
        grid: {
          left: "6%",
          top: "15%",
          bottom: "20%",
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: new_region, //Data.district
            axisLabel: {
              show: true,
              rotate:'25',
              textStyle: {
                color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          }
        ],
        yAxis: [
          {
            // name: "单位: (" + this.unit + ")",
            type: "value",
            axisLabel: {
              show: false,
              textStyle: {
                color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
              }
            },
            axisTick:{
              show:false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          }
        ],
        series: new_series
      };
    },
    initBarChart() {
      if (!this.optionsData.length) {
        return false;
      }
      let new_series = [];
      let new_region = [];
      this.optionsData.map(item => {
        new_series.push({
          name: item.name,
          type: "bar",
          stack: "总量",
          data: item.data
        });
      });
      this.currentRegionInfo.map(region => {
        new_region.push(
          region.originName ? region.originName : region.shortName
        );
      });
      var args = {
        tooltip: {
          trigger: "axis",
          padding: [8, 10],
          backgroundColor: "rgba(0,0,0,0.6)",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }
          }
        },
        title: {
          //            text: this.currQuotaMetaData.iden_name,
          x: "center",
          textStyle: {
            align: "center",
            color: "rgba(0,0,0,0.7)",
            fontFamily: "Microsoft YaHei",
            fontSize: 15
          }
        },
        legend: {
          data: new_region, //['人均预期寿命', '男性','女性'],
          bottom: "0%",
          x: "center",
          right: "center",
          textStyle: {
            color: "rgba(0,0,0,0.7)"
          },
          itemHeight: 6,
          borderRadius: 5
        },
        grid: {
          left: "6%",
          top: "15%",
          bottom: "20%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            offset: 10,
            data: new_region,
            //  改变x轴字体颜色和大小
            axisLabel: {
              show: true,
              rotate:'25',
              textStyle: {
                color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          }
        ],
        yAxis: [
          {
            // name: "单位: (" + this.unit + ")",
            type: "value",
            axisLabel: {
              show: false,
              textStyle: {
                color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
              }
            },
            axisTick:{
              show:false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          }
        ],
        series: new_series
      };
      return args; //echartsrender.portbar(args);
    },
    initbarStackChart() {
      let dimensions = ["product"];
      let source = [];
      let series = [];
      for (let i = 0; i < this.optionsData.length; i++) {
        series.push({ type: "bar" });
      }
      this.optionsData.map(item => {
        dimensions.push(item.name);
      });
      this.currentRegionInfo.map((region, i) => {
        let obj = {};
        obj["product"] = region.originName
          ? region.originName
          : region.shortName;
        this.optionsData.map((item, j) => {
          obj[item.name] = item.data[i];
        });
        source.push(obj);
      });
      return {
        title: {
          x: "center",
          textStyle: {
            align: "center",
            color: "rgba(0,0,0,0.7)",
            fontFamily: "Microsoft YaHei",
            fontSize: 15
          }
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "6%",
          top: "15%",
          bottom: "20%",
          containLabel: true
        },
        calculable: true,
        dataset: {
          dimensions: dimensions,
          source: source
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            rotate:'25',
            textStyle: {
              color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        yAxis: {
          axisLabel: {
            show: false,
            textStyle: {
              color: "rgba(255,255,255,.7)" //'rgba(255,255,255,0.7)'
            }
          },
          axisTick:{
            show:false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        series: series
      };
    },
    initPolarChart() {
      let angleData = []; //枚举
      let region_list_name = [];
      let seriesData = [];
      let pieData = {};
      pieData.data = [];
      pieData.type = "pie";
      pieData.radius = ["85%", "80%"];
      pieData.top = 10;
      pieData.avoidLabelOverlap = false;
      pieData.labelLine = { normal: { show: false } };
      pieData.label = {
        normal: {
          show: true,
          position: "outside",
          color: "#fff"
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: "15",
            fontWeight: "normal",
            color: "#fff"
          }
        }
      };
      pieData.name = this.optionsData[0].region_name[0];
      this.optionsData.map((data, index) => {
        angleData.push(data.name);
        let pie = {};
        pie.name = data.name;
        pie.value = data.data[0];
        pieData.data.push(pie);
      });
      this.currentRegionInfo.map((data, index) => {
        region_list_name.push(data.name?data.name:data.shortName);
      });
      angleData.map((legend, i) => {
        let obj = {};
        obj.data = [];
        obj.type = "bar";
        obj.coordinateSystem = "polar";
        obj.top = 10;
        obj.stack = "a";
        obj.name = legend;
        this.currentRegionInfo.map((data, index) => {
          obj.data.push({
            value: this.optionsData[i].data[index],
            name: this.optionsData[i].region_name[index]
          });
        });
        seriesData.push(obj);
      });
      seriesData.push(pieData);
      return {
        title: { id: "nestedPies" },
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              backgroundColor: "rgba(50, 161, 180, 1)",
              iconStyle: {
                normal: {
                  borderColor: "#fff"
                },
                emphasis: {
                  borderColor: "#fff",
                  textPosition: "top"
                }
              }
            }
          }
        },
        angleAxis: {
          type: "category",
          data: region_list_name,
          z: 10,
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          }
        },
        radiusAxis: {
          nameTextStyle: {
            color: "#ffffff"
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          }
        },
        polar: {
          center: ["50%", "50%"],
          radius: "70%"
        },
        series: seriesData
      };
    },

    mousedown(e) {
      if (e.srcElement.className == "title") {
        document.onmousemove = e2 => {
          this.left = e2.clientX - e.offsetX;
          this.top = e2.clientY - e.offsetY;
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmousedown = null;
        };
      }
    },
    //接收的数据进行排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return Number(value2) - Number(value1);
      };
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.chart-panel-drag {
  position: absolute;
  /*top: 560px;*/
  /*right: 46px;*/
  width: 360px;
  height: 360px;
  font-size: 1.4rem;
  z-index: 900;
  background: $panelContentBg;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    color: #fff;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .icon-font {
      float: right;
      line-height: 35px;
      cursor: pointer;
    }
    .close {
      margin-right: 8px;
      color: #fff;
    }
    .fscreen {
      margin-right: 18px;
    }
  }
  .nav {
    height: 45px;
    border-bottom: rgba(255, 255, 255, 0.1) solid 1px;
    box-sizing: border-box;
    padding: 0 10px;
    .pos {
      float: left;
      margin-left: 15px;
      line-height: 45px;
    }
    .fontClass {
      cursor: pointer;
      font-size: 2rem;
      color: #017bce;
    }
  }
  .chart-content {
    box-sizing: border-box;
    padding: 10px;
    height: calc(100% - 81px);
    .chart {
      height: 100%;
      width: 100%;
    }
  }
  .echarts-select {
    height: 30px;
  }
  .changeEcharts {
    width: 70px;
    float: right;
    z-index: 9999;
    padding: 10px 0;
  }
  .noData {
    text-align: center;
    line-height: 170px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 84px;
  }
  .changeEcharts {
    span {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.chart-panel-drag {
  .el-input--mini .el-input__inner {
    background: #17809a !important;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
</style>
